// 导入获取商品的接口
import  {GetGProduce} from '../../../../api/channel'
// 状态与生命周期
import {useEffect,useState} from 'react'
// 表格
import {Table} from 'antd'
// 列列席
import type { ColumnsType } from 'antd/es/table';
// props类型
interface Iprops{
  id:string
}
// 定义渲染的列
const columns: ColumnsType<any> = [
  {
    title: '产品名称',
    dataIndex: 'productName',
    key: 'productName'},    
  {
    title: '规格',
    dataIndex: 'specs',
    key: 'specs',
  },
  {
    title: '价格',
    dataIndex: 'salePrice',
    key: 'salePrice',
  }
]
function GProduce(props:Iprops) {
  // 分页信息
  const [pagination,setPagination] = useState({current:1,total:1,size:2})
  // 商品列表
  const [list,setList] = useState([])
  // 当分页信息current,和size变化时候,当props.id变化时获取(团购商品)商品的列表
  useEffect(()=>{
    GetGProduce({groupBuyId:props.id,current:pagination.current,size:pagination.size})
    .then((res:any)=>{
      // 更新商品列表
      setList(res.data);
      // 更新分页
      setPagination({...pagination,current:res.pagination.current,total:res.pagination.total})
    
    })
    // 监听哪些数据的变化
  },[props.id,pagination.current,pagination.size])

  return ( <div>商品列表内容

<Table columns={columns} dataSource={list} pagination={{
    total:pagination.total,
    defaultCurrent:pagination.current,
    defaultPageSize:pagination.size,
    // defaultPageSize默认分页大小,total总条数据,defaultCurrent默认当前页,onChange分页发生变化的时候
    onChange:(page,size)=>{
      // 更新分页的当页,和分页大小
      setPagination({...pagination,current:page,size:size})
    }
}} />
<p>{JSON.stringify(pagination)}</p>
  </div> );
}

export default GProduce;